<template>
    <el-container>
        <el-header>
            <span style="font-size:30px"><b>新龙生态林套票系统</b></span>
        </el-header>
        <el-main>
            <el-input placeholder="请输入手机号" style="width:40vh;margin-bottom:20px" v-model="phoneNum"/>
            <br/>
            <el-button @click="searchTicket()">查询</el-button>
        </el-main>
        <el-footer>
            design by wys
        </el-footer>
        <el-dialog
        title="输入操作员密码"
        v-model="dialogVisible"
        width="30%"
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        :show-close='false'
        >
            <el-input v-model="tempPwd" placeholder="请输入" style="margin:5px"/>
            <span v-if="message" style="color:red">{{message}}</span>
            <br/>
            <el-button style="margin:5px" @click="checkpwd()">确认</el-button>
        </el-dialog>
    </el-container>
    
</template>

<script lang="ts">
import { reactive, toRefs, onMounted} from 'vue';
import axios from 'axios'

export default {
    name: 'operator',
    setup() {
        const data = reactive({
            page: 'Operator' as string,
            message: '' as string,
            dialogVisible: true as boolean,
            tempPwd: '' as string,
            phoneNum: '' as string,
        })

        const methods = reactive({
            checkpwd:() => {
                if(data.tempPwd == data.password.find((item: any) => item.Name == data.page)?.Password){
                    data.dialogVisible = false
                } else {
                    data.message = '密码错误'
                }
            },
            searchTicket:() => {
                data.dialogVisible = true
            }
        })

        onMounted(() => {
            return new Promise((resolve, reject) => {
                axios({
                    url: '/api/password',
                    method: 'get'
                }).then((res: any) => {
                    data.password = res.data.data
                    resolve(true)
                }).catch((err: any) => {
                    console.log(err)
                    reject(false)
                })
            })
        })
        return {
            ...toRefs(data),
            ...toRefs(methods)
        }
    },
}
</script>

<style>
.el-header{
    padding: 10px;
    height: 20vh;
}
.el-main {
    height: 70vh;
}
.el-footer {
    padding: 20px;
    height: 10vh;
}
</style>